<template>
  <div>
    <!--导航栏-->
    <div
      style=" width: 100%;
    height: 74px;
    background-color: #1c52e4;
    box-shadow: 1px 1px 10px #eaeaea;"
    >
      <Header></Header>
    </div>
    <!--内容-->
    <div class="content" style="width: 1200px;height: 600px;margin-left: 80px;margin-top: 30px;margin-bottom: 30px;box-shadow: 3px 3px 10px #9d9fa6;">
      <div class="self_content">
        <h3 style="margin-left: 20px ; padding-top: 20px ">|积分商城</h3>
        <div class="sign_content" style=";width: 1050px;height: 80px;border-radius: 5px;box-shadow: 1px 1px 10px #9d9fa6;margin-top: 20px;margin-left: 70px">
          <span style="float: left;margin-left: 30px;margin-top: 28px">
            <strong>11</strong>
            月
            <b>7</b>
            日 &nbsp;&nbsp; 连续签到有机会越换超值礼品
          </span>
          <el-button style="float: right;margin-top: 22px;margin-right: 30px" type="danger" round>点击签到</el-button>
        </div>
        <div
          class="form_content"
          style="background-image: linear-gradient(rgb(58, 160, 255), rgb(20, 102, 255));width: 500px;height: 250px;float: left;margin-left: 70px;margin-top: 20px;border-radius: 5px"
        >
          <img src="../assets/user_logo.jpg" style="float: left;width: 60px;height: 60px;margin-left: 30px;margin-top: 30px;border-radius: 50px" alt="" />
          <div class="desc" style="float: left;margin-left: 12px">
            <span class="username" style="display: block;width: 270px;margin-top: 30px;margin-left: 10px;font-size: 16px;color: rgb(255,255,255);text-overflow: ellipsis;white-space: nowrap">
              {{ d.idCard }}
            </span>
            <span
              class="tag"
              style="position: relative;left: 11px;display: block;width: 66px;height: 18px;margin-top: 2px;font-size: 12px;line-height: 18px;color: rgb(255, 255, 255);text-align: center;background: rgba(255, 255, 255, 0.2);border-radius: 0px 100px 100px 0px;"
            >
              普通用户
            </span>
          </div>

          <div data-v-09199850 class="middle" style="">
            <span data-v-09199850="" class="point">0</span>
            爱豆
          </div>
          <div data-v-09199850 class="bottom" style="margin-top: 90px"><span data-v-09199850="" class="desc">爱豆有效期默认180天，去兑换权益吧！</span></div>
        </div>
        <!--排行榜-->
        <div class="right-content" style="width: 500px;height: 300px;float: right;margin-top: 20px;margin-right: 80px"><img src="../assets/rank.png" alt="" /></div>
      </div>
      <div class="vip_content"></div>
    </div>

    <!--脚页-->
    <footer data-v-05f63236="" data-v-e69431de="" id="aqc-footer" class="footer">
      <div data-v-05f63236="" class="footer-content">
        <div data-v-05f63236="" class="box company">
          <h3 data-v-05f63236="" class="title">爱企查</h3>
          <p data-v-05f63236="">
            <a data-v-05f63236="" href="/fs/about" target="_blank">关于我们</a>
            <a data-v-05f63236="" href="/fs/protocol" target="_blank">用户协议</a>
            <a data-v-05f63236="" href="https://www.baidu.com/duty/" target="_blank">免责声明</a>
          </p>
        </div>
        <div data-v-05f63236="" class="box ours">
          <h3 data-v-05f63236="" class="title">联系我们</h3>
          <p data-v-05f63236="" class="content">
            <i data-v-05f63236="" class="icon ivu-icon ivu-icon-ios-mail-outline" style="font-size: 20px;"></i>
            用户反馈：
            <span data-v-05f63236="" class="user-feedback-btn">点此反馈</span>
          </p>
          <p data-v-05f63236="" class="content">
            <i data-v-05f63236="" class="icon icon-cooperation"></i>
            商务合作：bd-aiqicha@baidu.com
          </p>
        </div>
        <div data-v-05f63236="" class="box source">
          <h3 data-v-05f63236="" class="title">数据来源</h3>
          <p data-v-05f63236="" class="content">
            <span data-v-05f63236="">国家企业信用信息公示系统</span>
            <span data-v-05f63236="">信用中国</span>
            <span data-v-05f63236="">中国裁判文书网</span>
          </p>
          <p data-v-05f63236="" class="content">
            <span data-v-05f63236="">中国执行信息公开网</span>
            <span data-v-05f63236="">国家知识产权局</span>
            <span data-v-05f63236="">商标局</span>
          </p>
          <p data-v-05f63236="" class="content">
            <span data-v-05f63236="">版权局</span>
            <span data-v-05f63236="">上海合合信息科技发展有限公司</span>
            <span data-v-05f63236="">民政部</span>
          </p>
        </div>
      </div>
      <p data-v-05f63236="" class="tip">
        <a data-v-05f63236="" href="https://beian.miit.gov.cn" target="_blank">京ICP证030173号</a>
        京网文|2013|0934-983号 Copyright ©2021 Baidu
      </p>
      <div data-v-a947a1ba="" data-v-05f63236=""><!----></div>
    </footer>
  </div>
</template>

<script>
import Header from '../components/Header';
import Footer from '../components/Footer';
export default {
  name: 'Vip',
  components: {
    Header,
    Footer
  },
  data() {
    return {
      d: {}
    }
  },
    methods:{
      /*单个id查询用户*/
      findUserById(id){
        this.updateFormVisible=true
        let _this = this
        console.log(id)
        this.$axios.get("http://localhost:8087/user/getUserById/"+id).then(function(res){
          _this.d = res.data
          console.log(res.data)
        }).catch(function (err) {
          alert('请登陆哦~')
        })
      },
    },
    created() {
      this.findUserById(localStorage.getItem("id"))
    }
  }
</script>

<style scoped>
.header_content {
  width: 100%;
  height: 74px;
  background-color: #ffffff;
  box-shadow: 1px 1px 10px #eaeaea;
  /*position: fixed;*/
}

.img_logo {
  float: left;
  width: 130px;
  height: 43px;
  margin-left: 165px;
  margin-top: 16px;
}

.link_a a {
  margin-left: 5px;
  margin-right: 10px;
  text-overflow: ellipsis;
  text-decoration: none;
  outline: none;

  color: #333;
  background: transparent;
  cursor: pointer;
  transition: color 0.1s ease;
}

a:hover {
  color: #2d8cf0;
}

/*footer*/
.footer[data-v-05f63236] {
  /*position: absolute;*/
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #141a25;
  color: #fff;
  font-size: 14px;
  overflow: hidden;
}

.footer-content[data-v-05f63236] {
  overflow: hidden;
  min-width: 1200px;
  box-sizing: border-box;
  padding: 48px 0 24px;
  width: 1200px;
  margin: 0 auto;
}

.footer-content[data-v-05f63236] {
  overflow: hidden;
  min-width: 1200px;
  box-sizing: border-box;
  padding: 48px 0 24px;
  width: 1200px;
  margin: 0 auto;
}

.title[data-v-05f63236] {
  opacity: 1;
  margin-bottom: 24px;
}

.box p[data-v-05f63236] {
  opacity: 0.6;
}

.box a[data-v-05f63236] {
  color: #fff;
  margin: 0 32px 24px 0;
  display: inline-block;
}

a,
a:hover {
  text-decoration: none;
}

a {
  outline: none;
}

a {
  color: #333;
  background: transparent;
  cursor: pointer;
  transition: color 0.1s ease;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a {
  color: #2d8cf0;
  background: 0 0;
  outline: 0;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.box[data-v-05f63236] {
  width: 33%;
  float: left;
  overflow: hidden;
}

.title[data-v-05f63236] {
  opacity: 1;
  margin-bottom: 24px;
}

.box p[data-v-05f63236] {
  opacity: 0.6;
}

.content[data-v-05f63236] {
  margin-bottom: 14px;
}

.box p[data-v-05f63236] {
  opacity: 0.6;
}

.content[data-v-05f63236] {
  margin-bottom: 14px;
}

.icon.icon-cooperation[data-v-05f63236] {
  vertical-align: -3px;
  color: hsla(0, 0%, 100%, 0.7);
  font-size: 16px;
  margin-right: 10px;
}

.icon[data-v-05f63236] {
  vertical-align: -4px;
  margin-right: 8px;
}

[class*=' icon-'],
[class^='icon-'] {
  font-family: icomoon !important;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.box[data-v-05f63236] {
  width: 33%;
  float: left;
  overflow: hidden;
}

.title[data-v-05f63236] {
  opacity: 1;
  margin-bottom: 24px;
}

.box p[data-v-05f63236] {
  opacity: 0.6;
}

.content[data-v-05f63236] {
  margin-bottom: 14px;
}

.content span[data-v-05f63236] {
  margin-right: 24px;
}

.content span[data-v-05f63236] {
  margin-right: 24px;
}

.tip[data-v-05f63236] {
  opacity: 0.4;
  width: 1200px;
  margin: 0 auto;
  border-top: 1px solid hsla(0, 0%, 100%, 0.4);
  padding: 24px 0;
  text-align: center;
}

.tip a[data-v-05f63236] {
  color: #fff;
}

.middle {
  margin-top: 23px;
  margin-left: 30px;
  font-size: 14px;
  color: rgb(255, 255, 255);
}
.middle .point[data-v-09199850] {
  font-size: 50px;
  color: rgb(255, 255, 255);
}

.bottom {
  height: 56px;
  line-height: 56px;
  color: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.2);
}

.bottom .desc[data-v-09199850] {
  margin-left: 30px;
}

.bottom .detail[data-v-09199850] {
  float: right;
  margin-right: 30px;
  text-decoration: underline;
  cursor: pointer;
}
</style>
